import React, { memo, useCallback, useState } from 'react';

// React.memo 仅检查 props 变更。如果函数组件被 React.memo 包裹，且其实现中拥有 useState 或 useContext 的 Hook，当 context 发生变化时，它仍会重新渲染。
const Memo = memo((props) => {
    console.log('Child 重新渲染');
    return (
        <div>
            <p onClick={() => props.click()}>ffff</p>
        </div>
    );
});

export default function UseCallback () {
    const [count, setCount] = useState(0);

    // useCallback就是阻止这类没必要的更新而存在的
    const handleClick = useCallback(() => {
        console.log('add');
    }, []);

    // 在更新count值得时候会重新渲染该组件, 导致 handleClick 会重新挂载到一个新的地址, 然后带动子组件重新更新
    // 就算此刻子组件被memo包裹, 还是避免不了被更新, 因为props更新
    // memo 记忆函数返回的值是否发生变化, 如果依赖没有发生变化, 不会重新渲染
    // const handleClick = () => {
    //   console.log('add');
    // }

    return (
        <div>
            模块{count}
            <button onClick={() => setCount(count + 1)}>add</button>
            <Memo click={handleClick} />
        </div>
    );
}
